<template>
  <div class="page">
    <div class="banner">
      <img
        :src="item.image"
        v-for="(item, index) in banner_list"
        :key="index"
        :style="banner_index == index ? 'opacity: 1' : ''"
      />
    </div>
    <div
      class="banner-content"
      @click="
        $router.push({
          path: 'teacher/index',
          query: {
            id: banner_list[banner_index].id
          }
        })
      "
      v-if="banner_list[banner_index]"
    >
      <h1
        v-if="banner_list[banner_index].banner_description"
      >{{ banner_list[banner_index].banner_description }}</h1>
      <p
        v-if="banner_list[banner_index].banner_description2"
      >{{ banner_list[banner_index].banner_description2 }}</p>
      <p
        v-if="banner_list[banner_index].banner_description3"
      >{{ banner_list[banner_index].banner_description3 }}</p>
      <div
        class="btn"
        @click.stop="
          ($store.state.show_recharge = true), ($store.state.order_type = 'vip')
        "
      >{{ $store.state.is_vip ? "会员续费" : "购买会员" }}</div>
      <div class="carousel">
        <div v-for="(item, index) in banner_list" :key="index" @mouseenter="banner_index = index">
          <span>{{ item.name }}</span>
          <p>{{ item.description2 }}</p>
        </div>
      </div>
      <i class="el-icon-arrow-left" @click.stop="bannerChange(false)"></i>
      <i class="el-icon-arrow-right" @click.stop="bannerChange(true)"></i>
    </div>
    <div class="mine-title" v-if="history_list.length">
      <p>Continue learning</p>
      <span>继续我的课程</span>
    </div>
    <enlarge :list="history_list" v-if="history_list.length"></enlarge>
    <div class="mine-title" v-if="mine_lesson.length">
      <p>About Master Horizons</p>
      <span>我参与的大师课</span>
    </div>
    <carousel
      height="4rem"
      :list="mine_lesson"
      image-key="image"
      name-key="name"
      showSpeed
      v-if="mine_lesson.length"
    ></carousel>
    <div class="mine-title" v-if="hot_list.length">
      <p>About Master Horizons</p>
      <span>大师来自各行各业</span>
    </div>
    <div class="class-list" v-if="hot_list.length">
      <div>
        <div>
          <img :src="info.image_before_1" alt />
          <span>{{info.image_word1_1}}</span>
          <p>{{info.image_word2_1}}</p>
          <p>{{info.image_word3_1}}</p>
        </div>
      </div>
      <div>
        <div>
          <img :src="info.image_before_2" alt />
          <span>{{info.image_word1_2}}</span>
          <p>{{info.image_word2_2}}</p>
          <p>{{info.image_word3_2}}</p>
        </div>
      </div>
      <div>
        <div>
          <img :src="info.image_before_3" alt />
          <span>{{info.image_word1_2}}</span>
          <p>{{info.image_word2_2}}</p>
          <p>{{info.image_word3_2}}</p>
        </div>
      </div>
    </div>
    <div class="mine-title">
      <p>Our Recommendation</p>
      <span>为你推荐的大师</span>
    </div>
    <teacher></teacher>
    <div class="mine-title">
      <p>Learning Comments</p>
      <span>学员感言</span>
    </div>
    <div class="card">
      <div
        v-for="(item, index) in lesson_comment"
        :key="index"
        @click="
          $router.push({
            path: 'Teacher/index',
            query: {
              id: item.group_id
            }
          })
        "
      >
        <div>
          <img :src="item.uface" alt />
          <span>{{ item.uname }}</span>
        </div>
        <p>{{ item.comment }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import enlarge from "@/components/list/enlarge";
import teacher from "@/components/list/teacher";
import carousel from "@/components/list/carousel";
export default {
  components: { enlarge, teacher, carousel },
  data() {
    return {
      banner_list: [],
      banner_index: 0,
      history_list: [],
      mine_lesson: [],
      lesson_comment: [],
      comment_index: 0,
      hot_list: [],
      year_price: 0,
      info: {},
      banner: Function
    };
  },
  created() {
    let _this = this;
    if (_this.$store.state.is_login) {
      _this.$axios.get("site/index2").then(res => {
        _this.history_list = res.history.list;
        _this.mine_lesson = res.myLesson.list;
      });
    }
    _this.$axios.get("site").then(res => {
      console.log(res);
      _this.info = res.info;
      _this.banner_list = res.carousel;
      _this.lesson_comment = res["lesson-comment"];
      _this.startChange();
    });
    _this.$axios.get("site/vip").then(res => {
      _this.year_price = res.price;
    });
    _this.$axios.get("site/hot-searcher").then(res => {
      _this.hot_list = res;
    });
  },
  methods: {
    stopChange() {
      let _this = this;
      if (_this.banner) {
        window.clearInterval(_this.banner);
      }
    },
    startChange() {
      let _this = this;
      _this.banner = setInterval(() => {
        if (_this.banner_index == _this.banner_list.length - 1) {
          _this.banner_index = 0;
        } else {
          _this.banner_index++;
        }
      }, 6000);
    },
    bannerChange(e) {
      let _this = this;
      if (e) {
        if (_this.banner_index == _this.banner_list.length - 1) {
          _this.banner_index = 0;
        } else {
          _this.banner_index++;
        }
      } else {
        if (_this.banner_index == 0) {
          _this.banner_index = _this.banner_list.length - 1;
        } else {
          _this.banner_index--;
        }
      }
    },
    changePage(e) {
      this.$router.push({
        path: e
      });
    }
  }
};
</script>

<style lang="less" scoped>
.banner {
  width: 100%;
  height: 100vh;
  position: absolute;
  @media only screen and (max-width: 500px),
    only screen and (max-device-width: 500px) {
    height: 100vh;
  }
  > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    opacity: 0;
    transition: all 1s;
  }
}
.banner-content {
  width: 100%;
  height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  color: white;
  top: 50vh;
  transform: translateY(-50%);
  cursor: pointer;
  > h1 {
    font-size: 0.3rem;
    letter-spacing: 4px;
  }
  > p {
    font-size: 0.4rem;
    font-weight: 700;
    line-height: 0.5rem;
    margin-top: 0.1rem;
    text-align: center;
    letter-spacing: 4px;
  }
  .btn {
    background: black;
    border-radius: 1rem;
    margin-top: 50px;
    margin-bottom: 2.3rem;
    padding: 0.2rem 0.6rem;
    border: 1px @gold-color solid;
    transition: all 300ms;
    cursor: pointer;
  }
  .btn:hover {
    background: @gold-color;
    color: @black-color;
    font-weight: bold;
  }
  .carousel {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    position: absolute;
    bottom: 0;
    @media only screen and (max-width: 500px),
      only screen and (max-device-width: 500px) {
      display: none;
    }
    > div {
      height: 1.5rem;
      flex: 1;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      padding: 30px 30px 0 30px;
      background: rgba(255, 255, 255, 0.2);
      transition: all 300ms;
      > span {
        font-size: @normal-size;
        line-height: @small-size;
        margin-bottom: 0.2rem;
        transition: all 300ms;
      }
      > p {
        height: calc(100% - @small-size - 0.5rem);
        font-size: @normal-size;
        line-height: @big-size;
        word-break: break-all;
        transition: all 300ms;
        overflow: hidden;
        color: @node-color;
      }
    }
    > div:hover {
      height: 2rem;
      background: white;
      > span {
        font-size: @title-size;
        color: @black-color;
        font-weight: bold;
      }
      > p {
        font-size: @normal-size;
        color: @dark-color;
      }
    }
    > div + div {
      border-left: 1px #999 solid;
    }
  }
  > i {
    width: 0.7rem;
    height: 0.7rem;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.2rem;
    color: @black-color;
    position: absolute;
    top: calc(50% - 0.25rem);
    cursor: pointer;
    opacity: 0.5;
    transition: 300ms;
    font-weight: bold;
  }
  > i:hover {
    opacity: 1;
  }
  .el-icon-arrow-left {
    left: 0.4rem;
  }
  .el-icon-arrow-right {
    right: 0.4rem;
  }
}
.class-list {
  width: @width;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  @media only screen and (max-width: 500px),
    only screen and (max-device-width: 500px) {
    width: calc(100% - 0.6rem);
  }
  > div {
    // width: @width / 5.5;
    @media only screen and (max-width: 500px),
      only screen and (max-device-width: 500px) {
      width: 100%;
    }
    > div {
      width: 3rem;
      height: 2.3rem;
      background: rgba(255, 255, 255, 0.05);
      border: 1px @gold-color solid;
      border-radius: 0.1rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #8a8a8a;
      font-size: @title-size;
      transition: all 1000ms;
      // padding: 0.3rem;
      @media only screen and (max-width: 500px),
        only screen and (max-device-width: 500px) {
        width: 100%;
        height: auto;
        padding-top: 0.6rem;
        padding-bottom: 0.6rem;
      }
      > img {
        width: 0.5rem;
        height: 0.5rem;
        transition: all 1000ms;
        margin-bottom: 0.1rem;
      }
      > p {
        font-size: @small-size;
        margin-top: 0.1rem;
      }
    }
  }
  > div + div {
    margin-left: 0.6rem;
    @media only screen and (max-width: 500px),
      only screen and (max-device-width: 500px) {
      margin-left: 0;
      margin-top: 0.6rem;
    }
  }
  > div:hover {
    > div {
      transform: rotateY(360deg);
      background: @gold-color;
      color: white;
      > img {
        filter: brightness(1000%);
      }
    }
  }
}
.card {
  width: @width;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  color: @black-color;
  flex-wrap: wrap;
  @media only screen and (max-width: 500px),
    only screen and (max-device-width: 500px) {
    width: calc(100% - 0.6rem);
  }
  > div {
    width: calc((100% - 0.6rem) / 3);
    background: white;
    box-sizing: border-box;
    border-radius: 0.1rem;
    padding: 0.2rem;
    cursor: pointer;
    margin-bottom: 0.3rem;
    @media only screen and (max-width: 500px),
      only screen and (max-device-width: 500px) {
      width: 100%;
      padding: 0.3rem;
    }
    > div {
      display: flex;
      flex-direction: row;
      align-items: center;
      > img {
        width: 0.5rem;
        height: 0.5rem;
        object-fit: cover;
        border-radius: 50%;
        // background: @node-color;
        margin-right: 0.1rem;
      }
      > span {
        font-size: @normal-size;
        font-weight: bold;
      }
    }
    > p {
      font-size: @normal-size;
      margin-top: 0.05rem;
      line-height: 0.25rem;
      @media only screen and (max-width: 500px),
        only screen and (max-device-width: 500px) {
        margin-top: 0.2rem;
        line-height: 0.6rem;
      }
    }
  }
}
.logo-list {
  width: @width;
  height: 3rem;
  object-fit: contain;
  margin-top: 0.5rem;
}
</style>
